<!-- 车型添加 -->
<template>
  <div>
    <el-dialog
      :title="check?'新增车型':'编辑车型'"
      :visible="showDialog"
      width="600px"
      @close="changeShow"
    >
      <el-form
        ref="dialogList"
        label-width="130px"
        :rules="rules"
        :model="list"
      >
        <el-form-item
          label="车辆类型"
          prop="name"
        >
          <el-input
            v-model="list.name"
            placeholder="请输入车辆类型"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="应载重量"
          prop="allowableLoad"
        >
          <el-input
            v-model="list.allowableLoad"
            placeholder="请输入车型载重"
          >
            <i
              slot="suffix"
              style="color: rgb(32, 35, 42); font-weight: 400; font-size: 14px; margin-right: 14px;"
            >吨</i>
          </el-input>
        </el-form-item>
        <el-form-item
          label="应载体积"
          prop="allowableVolume"
        >
          <el-input
            v-model="list.allowableVolume"
            placeholder="请输入车型体积"
          >
            <i
              slot="suffix"
              style="color: rgb(32, 35, 42); font-weight: 400; font-size: 14px; margin-right: 14px;"
            >立方</i>
          </el-input>
        </el-form-item>
        <el-form-item
          label="长"
          prop="measureLong"
        >
          <el-input v-model="list.measureLong">
            <i
              slot="suffix"
              style="color: rgb(32, 35, 42); font-weight: 400; font-size: 14px; margin-right: 14px;"
            >米</i>
          </el-input>
        </el-form-item>
        <el-form-item
          label="宽"
          prop="measureWidth"
        >
          <el-input v-model="list.measureWidth">
            <i
              slot="suffix"
              style="color: rgb(32, 35, 42); font-weight: 400; font-size: 14px; margin-right: 14px;"
            >米</i>
          </el-input>
        </el-form-item>
        <el-form-item
          label="高"
          prop="measureHigh"
        >
          <el-input v-model="list.measureHigh">
            <i
              slot="suffix"
              style="color: rgb(32, 35, 42); font-weight: 400; font-size: 14px; margin-right: 14px;"
            >米</i>
          </el-input>
        </el-form-item>
        <el-form-item style="padding-bottom: 38px; padding-top: 14px;">
          <el-row>
            <el-col :span="20">
              <el-button
                class="req-btn"
                @click="reqBtn"
              >确认</el-button>
              <el-button
                class="esc-btn"
                @click="escBtn"
              >取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { detail, update, add } from '@/api/transit'
export default {
  name: 'CarModelsAdd',
  props: {
    // 展示判断
    showDialog: {
      type: Boolean,
      default: false
    },
    // 判断添加修改
    check: {
      type: Number,
      default: 1
    },
    // id
    transmitId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: {
        allowableLoad: '', // 载重
        allowableVolume: '', // 体积
        measureHigh: '0.0', // 高
        measureLong: '0.0', // 长
        measureWidth: '0.0', // 宽
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '车型名称不能为空', trigger: 'blur' },
          { max: 30, message: '名称长度不能超过30个字符', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '应载重量不能为空', trigger: 'blur' },
          { pattern: /^(?!0+(\.00?)?$)(?:[1-9]\d{0,2}(?:\.\d{1,2})?|0?\.\d{1,2})$/, message: '输入重量应在0.01到999之间', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '应载体积不能为空', trigger: 'blur' },
          { pattern: /^(?!0+(\.00?)?$)(?:[1-9]\d{0,2}(?:\.\d{1,2})?|0?\.\d{1,2})$/, message: '输入体积应在0.01到999之间', trigger: 'blur' }
        ],
        measureHigh: [
          { pattern: /^(?!0+(\.00?)?$)(?:[1-9]\d{0,2}(?:\.\d{1,2})?|0?\.\d{1,2})$/, message: '输入高度应在0.01到999之间', trigger: 'blur' }
        ],
        measureLong: [
          { pattern: /^(?!0+(\.00?)?$)(?:[1-9]\d{0,2}(?:\.\d{1,2})?|0?\.\d{1,2})$/, message: '输入长度应在0.01到999之间', trigger: 'blur' }
        ],
        measureWidth: [
          { pattern: /^(?!0+(\.00?)?$)(?:[1-9]\d{0,2}(?:\.\d{1,2})?|0?\.\d{1,2})$/, message: '输入宽度应在0.01到999之间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 改变展示状态
    changeShow() {
      this.$emit('update:showDialog', false)
      setTimeout(() => {
        this.list = {
          allowableLoad: '',
          allowableVolume: '',
          measureHigh: '0.0',
          measureLong: '0.0',
          measureWidth: '0.0',
          name: ''
        }
        this.$refs.dialogList.resetFields()
      }, 1000)
    },
    // 获取车辆详情
    async detail(id) {
      // 判断状态
      if (id) {
        const { data } = await detail(id)
        // console.log(data)
        this.list = data
      } else {
        this.list = {
          allowableLoad: '',
          allowableVolume: '',
          measureHigh: '0.0',
          measureLong: '0.0',
          measureWidth: '0.0',
          name: ''
        }
        // this.$refs.dialogList.resetFields()
      }
    },
    // 确认按钮
    async reqBtn() {
      this.$refs.dialogList.validate(async isOK => {
        if (isOK) {
          if (this.transmitId) {
            const res = await update(this.transmitId, this.list)
            this.$message.success(res.msg)
            this.changeShow()
          } else {
            const res = await add(this.list)
            console.log(res)
            if (res.code === 1) {
              this.$message.error(res.msg)
            } else {
              this.changeShow()
              this.$message.success('操作成功')
            }
          }
          this.$emit('update')
        }
      })
    },
    // 取消按钮
    escBtn() {
      this.changeShow()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .req-btn {
    background-color: #e15536;
    color: #fff;
    width: 90px;
    border-radius: 5px;
    font-weight: 400;
    border: 1px solid #e15536;
  }
  .req-btn:hover {
    background: #ffab98 !important;
  }
  .req-btn:focus {
    background: #ffab98 !important;
  }
  .esc-btn {
    width: 90px;
    color: #2a2929;
    border: 1px solid #d8dde3;
    border-radius: 5px;
    font-weight: 400;
    margin-left: 15px !important;
}
  .esc-btn:hover {
    background: #ffeeeb !important;
    border-color: #f3917c !important;
    color: #e15536 !important;
  }
  .esc-btn:focus {
    background: #ffeeeb !important;
    border-color: #f3917c !important;
    color: #e15536 !important;
  }
</style>
